<template>
	<view class="content poRel">
		<view style="height: 50rpx;"></view>
		<view class="wid90 mar borRad20 bacFFF" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 10rpx 0;">
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">联系人</view>
				<input class="foSi25" style="text-align: right;" v-model="name"
					placeholder="请输入联系人姓名" placeholder-style="color: #737373;"/>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">手机号</view>
				<input class="foSi25" style="text-align: right;" v-model="phone" type="number"
					placeholder="请输入手机号" placeholder-style="color: #737373;"/>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">省市区</view>
				<view class="dis disAl foSi25" @click="open()">
					<view v-if="!provincial" class="mar-right10" style="color: #737373;">请选择省市区</view>
					<uni-icons v-if="!provincial" type="right" size="35rpx" color="#737373"></uni-icons>
					<view v-if="provincial" class="mar-right10">{{provincial}}</view>
					<uni-icons v-if="provincial" type="right" size="35rpx"></uni-icons>
				</view>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">详细地址</view>
				<!-- <view class="dis disAl">
					<input class="foSi25 mar-right10" style="text-align: right;" v-model="address"
						placeholder="详细到门牌号" placeholder-style="color: #737373;"/>
					<uni-icons type="location" size="35rpx" color="#00C924"></uni-icons>
				</view> -->
				<view class="dis disAl" style="max-width: 75%;" @click="getAddressName">
					<view v-if="!address" class="mar-right10" style="color: #737373;">详细到门牌号</view>
					<view v-if="address" class="max-width: 75%; mar-right10 webkitLineClamp">{{address}}</view>
					<uni-icons type="location" size="35rpx" :color="theme.main_color"></uni-icons>
				</view>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl" style="height: 96rpx;" @click="xuan = !xuan">
				<view v-if="xuan" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
					style="width: 26rpx;height: 26rpx;">
					<view class="borRad50" :style="'background-color: '+theme.main_color+';'"
					style="width: 14rpx;height: 14rpx;"></view>
				</view>
				<view v-if="!xuan" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
				<view class="mar-left20 foSi25">设为默认</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="poFix wid100 dis disAl disJuC bacFFF" style="height: 124rpx;border-top: 1rpx solid #878787;bottom: 0;">
			<view class="hei80 dis disAl disJuC borRad40 coFFF foSi35 fowe600" 
				style="width: 450rpx;" :style="'background-color: '+theme.main_color+';'" @click="tijiao()">保存</view>
		</view>
		<piaoyi-cityPicker :column="3" @confirm="confirm" @cancel="cancel" :visible="visible"></piaoyi-cityPicker>
		<!-- 天地图使用示例 -->
		<zhuo-tianditu-select ref="tMap" :api-key="apiKey" :icon="icon" :search="false" @onSelect="addClick"></zhuo-tianditu-select>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				xuan: false,
				visible: false,
				id: '',
				name: '',
				phone: '',
				provincial: '',
				address: '',
				theme: null,
				apiKey: this.global.apiKey,
				icon: ''
			}
		},
		onLoad(option) {
			var that = this
			this.theme = uni.getStorageSync('theme')
			
			if(option.list){
				var list = JSON.parse(option.list)
				this.id = list.id
				this.name = list.name
				this.phone = list.mobile
				this.provincial = list.address
				this.address = list.address_info
				this.xuan = list.state == 1?true:false
				this.lat = list.lat;
				this.lon = list.lon;
			}
			uni.getImageInfo({
				src: '../../static/dingwei3.png',
				success(res) {
					that.icon = res.path
				},
			})
		},
		methods: {
			
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.visible = false
				this.provincial = val.name
				this.$forceUpdate()
			},
			getAddressName(){
				var that = this;
				if(that.provincial){
					uni.request({
						url: 'https://api.tianditu.gov.cn/geocoder',
						method: "GET",
						data: {
							ds: {'keyWord':that.provincial},
							tk: that.global.apiKey
						},
						success(res) {
							console.log('解析的地址',res.data.location)
							that.$refs.tMap.open(res.data.location.lon,res.data.location.lat)
						}
					})
				}else{
					var lat = uni.getStorageSync('lat') ? uni.getStorageSync('lat') : 43.86414
					var lon = uni.getStorageSync('lon') ? uni.getStorageSync('lon') : 125.35043
					that.$refs.tMap.open(lon,lat)
				}
			},
			cancel() {
				this.visible = false
				this.$forceUpdate()
				console.log(this.visible)
			},
			shuanchu(index){
				this.list.splice(index, 1);
			},
			xuanClick(item){
				
				if(this.xuan != item.id){
					this.xuan = item.id
				}
			},
			addClick(value){
				var that = this
				console.log(value)
				that.address = value.address
				that.lat = value.location.lat;
				that.lon = value.location.lon;
			},
			huoqu(){
				var that = this;
				if(!that.name){return uni.showToast({title: '请输入姓名',icon: 'error',duration: 2000}) }
				//正则表达式定义手机号正确格式
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)){return uni.showToast({title: '请输入正确手机号',icon: 'error',duration: 2000})};
				if(!that.provincial){return uni.showToast({title: '请选择地址',icon: 'error',duration: 2000}) }
				if(!that.address){return uni.showToast({title: '请输入详细地址',icon: 'error',duration: 2000}) }
				//调用地址解析接口
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address=', {
					key: 'MGJBZ-YHIKI-B4DGL-UPRDI-CIN7Z-UFB7H',
					address: that.provincial+that.address,
					output: 'jsonp'
				}).then(res => {
					console.log(res)
					that.lat = res.result.location.lat;
					that.lon = res.result.location.lng;
					that.tijiao()
				}).catch(err => {
					console.log(err);
				});
			},
			tijiao(){
				var that = this;
				if(!that.name){return uni.showToast({title: '请输入姓名',icon: 'error',duration: 2000}) }
				//正则表达式定义手机号正确格式
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)){return uni.showToast({title: '请输入正确手机号',icon: 'error',duration: 2000})};
				if(!that.provincial){return uni.showToast({title: '请选择地址',icon: 'error',duration: 2000}) }
				if(!that.address){return uni.showToast({title: '请输入详细地址',icon: 'error',duration: 2000}) }
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/address/add_edit',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						name: that.name,
						mobile: that.phone,
						address: that.provincial,
						address_info: that.address,
						state: that.xuan?1:0,
						id: that.id,
						lat: that.lat,
						lon: that.lon
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
				
			},
			getList(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/address/lists',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							if(that.page == 1){
								that.list = result.data
							}else{
								that.list = that.list.concat(result.data)
							}
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
				
			},
			fanhui(){
				uni.navigateBack(1)
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
</style>